<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<script src="../jslib/jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../jslib/jquery-easyui-1.3.1/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
<link type="text/css" rel="stylesheet" href="../jslib/jquery-easyui-1.3.1/themes/icon.css" />
<link type="text/css" rel="stylesheet" href="../jslib/jquery-easyui-1.3.1/themes/gray/easyui.css" />
<link type="text/css" rel="stylesheet" href="../jslib/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js" />
<link rel="stylesheet" type="text/css" href="../style/home.css">
<script type="text/javascript" charset="utf-8">
	var user_datagrid;
	$(function() {

		user_datagrid = $('#user_datagrid').datagrid({
			url : 'dataGrid',
			iconCls : 'icon-save',
			pagination : true,
			pagePosition : 'bottom',
			pageSize : 10,
			pageList : [ 10, 20, 30, 40 ],
			fit : true,
			fitColumns : true,
			nowrap : false,
			border : false,
			idField : 'cid',
			sortName : 'cname',
			sortOrder : 'desc',
			checkOnSelect : true,
			selectOnCheck : true,
			singleSelect : true,//True 就会只允许选中一行。
			frozenColumns : [ [ {
				title : '编号',
				field : 'id',
				width : 150,
				sortable : true,
				checkbox : true
			}, {
				title : '用户名',
				field : 'username',
				width : 50,
				sortable : true
			} , {
				title : '用户权限',
				field : 'permission',
				width : 60,
				sortable : true
			} ] ],
			columns : [ [ {
				title : '姓名',
				field : 'realName',
				sortable : true,
				width : 60
			}, {
				title : '密码',
				field : 'password',
				width : 60,
				formatter : function(value, rowData, rowIndex) {
					return '******';
				}
			}, {
				title : '性别',
				field : 'gender',
				sortable : true,
				width : 30
			},{
				title : 'Email',
				field : 'email',
				width : 60,
				sortable : true
			},{
				title : '联系电话',
				field : 'phone',
				width : 100
			},{
				title : '工作单位',
				field : 'company',
				width : 100
			},{
				title : '工作地点',
				field : 'workingPlace',
				width : 100,
				sortable : true
			},{
				title : '工作部门',
				field : 'department',
				width : 100,
				sortable : true
			},{
				title : '动作',
				field : 'action',
				width : 100
		/*		formatter : function(value,rowData,rowIndex){
					if (rowData.id == '0') {
						return '超级管理员';
					}
					else{
						return formatString('<img onclick="userEdit(\'{0}\');" src="{1}"/>&nbsp;<img onclick="userDelete(\'{2}\');" src="{3}"/>', row.id, '../image/icons/pencil.png', row.id, '../image/icons/cancel.png');
					}
				}*/
			}] ],
			toolbar : [ {
				text : '增加',
				iconCls : 'icon-add',
				handler : function() {
					append();
				}
			}, '-', {
				text : '删除',
				iconCls : 'icon-remove',
				handler : function() {
					remove();
				}
			}, '-', {
				text : '修改',
				iconCls : 'icon-edit',
				handler : function() {
					edit();
				}
			}, '-', {
				text : '取消选中',
				iconCls : 'icon-undo',
				handler : function() {
					user_datagrid.datagrid('clearSelections');
					user_datagrid.datagrid('unselectAll');
				}
			},'-' ],
			onRowContextMenu : function(e, rowIndex, rowData) {
				e.preventDefault();
				$(this).datagrid('unselectAll');
				$(this).datagrid('selectRow', rowIndex);
				$('#menu').menu('show', {
					left : e.pageX,
					top : e.pageY
				});
			}
		});

	$.extend($.fn.validatebox.defaults.rules, {  //验证两次密码是否一致
		equals: {
			validator: function(value,param){
			return value == $(param[0]).val();
			},
			message: '两次输入的密码不一致！'
			}
		});

	});


function append(){
	$('#appendDialog').dialog({
		modal : true,
		title : '添加用户',
		closable : true,
		closed : false,
		buttons : [{
			text : '添加',
			handler : function(){
				$.ajax({
					url : 'registerAction',
					type : 'post',
					data : $('#userAppendForm input').serialize(),
					cache : false,
					datatype : 'json',
					success : function(r){
						r = $.parseJSON(r);
						if (r && r.success) {
							//右下角出现添加用户成功的提示
							$('#user_datagrid').datagrid('load');
							$('#userAppendForm').form('clear');
							$('#appendDialog').dialog('close');
							/*
							$('#user_datagrid').datagrid('insertRow',{
								index : 0,
								row : r.obj
							});*/
							$.messager.show({
								title : "提示",
								msg : "添加用户成功，请继续操作"
							});
						}
						else
						{
							$.messager.alert("错误",r.msg);
						}
					}
				});
			}
		},{
			text : '重置',
			handler : function(){
				$('#userAppendForm').form('clear');
			}
		}]
	});
}

function edit() {
	var rows = $('#user_datagrid').datagrid('getChecked');

	if (rows.length > 0) {
		var id = rows[0].id;
		$('<div style="overflow:hidden"/>').dialog({
			href: 'userEdit.jsp',
			width: 600,
			modal: true,
			height: 250,
			title: '编辑用户',
			buttons: [{
				text: '编辑',
				iconCls: 'icon-edit',
				handler: function() {
					var d = $(this).closest('.window-body');
					$.ajax({
						url: 'registerAction!editUser',
						type: 'post',
						data: $('#editForm input').serialize(),
						cache: false,
						datatype: 'json',
						success: function(r) {
							r = $.parseJSON(r);
							if (r && r.success) {
								$('#user_datagrid').datagrid('load');
								$('#user_datagrid').datagrid('uncheckAll').datagrid('unselectAll').datagrid('clearSelections');
								d.dialog('destroy');
								$.messager.show({
									title: "提示",
									msg: "编辑用户成功"
								});
							} else {
								$.messager.alert("错误", r.msg);
							}
						}
					});
				}
			}, {
				text: "重置",
				iconCls: 'icon-remove',
				handler: function(r) {
					$('#editForm').form('clear');
				}
			}],
			onClose: function() {
				$(this).dialog('destroy');
			},
			onLoad: function() {
				$('#editForm').form('load', {
					username: rows[0].username,
					permission: rows[0].permission,
					gender: rows[0].gender,
					department: rows[0].department,
					email: rows[0].email,
					phone: rows[0].phone,
					company: rows[0].company,
					workingPlace: rows[0].workingPlace,
					id: rows[0].id
				});
			}
		});
	}
	else{
		$.messager.show({
			title : "提示",
			msg : "请先勾选索要编辑的用户！"
		});
	}
}

	function remove(){
		var rows = $(user_datagrid).datagrid('getChecked');
		if (rows.length > 0) {
			$.messager.confirm('确认','您是否要删除当前选中的项目？',function(r){
				if (r) {
					//权限还没加
					$.ajax({
						url : 'registerAction!removeUser',
						type : 'post',
						datatype : 'json',
						data : {id : rows[0].id},
						success : function(result){
							result = $.parseJSON(result);
							if(result && result.success)
							{
								$('#user_datagrid').datagrid('load');
								$('#user_datagrid').datagrid('uncheckAll').datagrid('unselectAll').datagrid('clearSelections');
								$.messager.show({
									title : '提示',
									msg : '删除用户成功！'
								});
							}
							else
							{
								$.messager.alert("错误",result.msg);
							}
						}
					});
				}
			});
		}
		else{
			$.messager.show({
				title : '提示',
				msg : '请勾选要删除的记录！'
			});
		}
	}
</script>
</head>
<body class="easyui-layout" data-options="fit:true">
	<div data-options="region:'north',border:false" style="height:35px;overflow: hidden;" align="left">
		<form id="searchForm">
			<table class="datagrid-toolbar" style="width: 100%;height: 100%;">
				<tr>
					<th>姓名</th>
					<td><input name="cname" style="width:317px;" /><a style="margin-left:5px" href="javascript:void(0);" class="easyui-linkbutton" onclick="_search();">过滤</a><a style="margin-left:5px" href="javascript:void(0);" class="easyui-linkbutton" onclick="cleanSearch();">取消</a></td>
				</tr>
			</table>
		</form>
	</div>
    
    <div data-options="region:'center',border:false" style="overflow: hidden;">
		<table id="user_datagrid"></table>
	</div>
	
	<div id="menu" class="easyui-menu" style="width:120px;display: none;">
		<div onclick="append();" data-options="iconCls:'icon-add'">增加</div>
		<div onclick="remove();" data-options="iconCls:'icon-remove'">删除</div>
		<div onclick="edit();" data-options="iconCls:'icon-edit'">编辑</div>
	</div>

<!--添加用户-->
	<div id="appendDialog" style="padding: 5px;overflow: hidden;width:500px;height:250px;">
	<form id="userAppendForm" method="post">
		<table class="tableForm">
			<tr>
				<th style="width: 60px;">用户名</th>
				<td><input name="username" style="width: 145px;" class="easyui-validatebox" data-options="required:'true',missingMessage:'请填写用户名'" />
				</td>
				<th style="width: 60px;">用户权限</th>
				<td><input name="permission" style="width: 145px;" />
				</td>
			</tr>
			<tr>
				<th>密码</th>
				<td><input name="password" style="width: 145px;" type="password" class="easyui-validatebox" data-options="required:'true',missingMessage:'请填写登录密码'" />
				</td>
				<th>重复密码</th>
				<td><input type="password" class="easyui-validatebox" style="width: 145px;" data-options="required:'true',missingMessage:'请再次填写密码'" validType="equals['#pwd']"/>
				</td>
			</tr>
			<tr>
				<th style="width: 60px;">性别</th>
				<td><input name="gender"  style="width: 145px;"/>
				</td>
				<th style="width: 60px;">工作部门</th>
				<td><input name="department" style="width: 145px;" />
				</td>
			</tr>
			<tr>
				<th style="width: 60px;">Email</th>
				<td><input name="email"  style="width: 145px;"/>
				</td>
				<th style="width: 60px;">联系电话</th>
				<td><input name="phone" style="width: 145px;" />
				</td>
			</tr>
			<tr>
				<th style="width: 60px;">工作单位</th>
				<td><input name="company"  style="width: 145px;"/>
				</td>
				<th style="width: 60px;">工作地点</th>
				<td><input name="workingPlace" style="width: 145px;" />
				</td>
			</tr>
			
		</table>
	</form>
</div>
</body>
</html>